import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import UUID from 'uuidjs';
import { DialogService } from 'ng-devui/modal';
interface PersonListItem {
  id: string;
  name: string;
  isChecked: boolean;
}
@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.less'],
})
export class BaseComponent implements OnInit {
  constructor(private dialogService: DialogService) {}
  public value: string = '';
  @ViewChild('addName') addNameRef:
    | ElementRef<HTMLParagraphElement>
    | undefined;
  public personList: Array<PersonListItem> = [
    {
      id: UUID.generate(),
      name: '张三',
      isChecked: true,
    },
    {
      id: UUID.generate(),
      name: '李四',
      isChecked: false,
    },
  ];

  /**
   * @description 添加人员
   * @returns
   */
  public addPersonListItem() {
    console.log(this.value);
    if (!this.value) {
      const results = this.dialogService.open({
        id: 'dialog-service',
        width: '346px',
        maxHeight: '600px',
        title: '',
        content: '添加人员时，姓名不能为空!',
        backdropCloseable: false,
        dialogtype: 'failed',
        buttons: [
          {
            cssClass: 'primary',
            text: 'Ok',
            handler: ($event: Event) => {
              results.modalInstance.hide();
            },
          },
        ],
      });
      return;
    }
    this.personList.push({
      id: UUID.generate(),
      name: this.value,
      isChecked: false,
    });
    this.value = '';
    // console.log(this.addNameRef);
    this.addNameRef.nativeElement.focus();
  }
  /**
   * @description 关闭弹框的回调
   * @param $event
   */
  handleClose($event) {
    console.log($event);
  }
  getSumListLength(): number {
    return this.personList.length;
  }
  getCheckedLength(): number {
    return this.personList.filter((ele) => ele.isChecked).length;
  }
  getNoCheckedLength(): number {
    return this.personList.filter((ele) => !ele.isChecked).length;
  }

  /**
   * @description 删除人员
   */
  public deletePersonListItem(id: string): void {
    this.personList = this.personList.filter((ele) => ele.id !== id);
  }
  ngOnInit(): void {}
}
